<template>
    <div class="my-container">

        <div v-if="!user" class="header not-login">
            <div class="login-btn" @click="$router.push('/login')">
                <img src="~@/assets/mobile.png" class="mobile-img" alt="">
                <span class="text">登录 / 注册</span>
            </div>
        </div>

        <div v-else class="header user-info">

            <div class="base-info">
                <div class="left">
                    <van-image
                        class="avatar"
                        round fit="cover"
                        :src="userInfo.photo"
                    />
                    <span class="name">{{userInfo.name}}</span>
                </div>
                <div class="right">
                    <van-button to="/user/profile" size="mini" round>编辑资料</van-button>
                </div>
            </div>

            <div class="data-stats">
                <div class="data-item">
                    <span class="count">{{userInfo.art_count}}</span>
                    <span class="text">头条</span>
                </div>
                <div class="data-item">
                    <span class="count">{{userInfo.follow_count}}</span>
                    <span class="text">关注</span>
                </div>
                <div class="data-item">
                    <span class="count">{{userInfo.fans_count}}</span>
                    <span class="text">粉丝</span>
                </div>
                <div class="data-item">
                    <span class="count">{{userInfo.like_count}}</span>
                    <span class="text">获赞</span>
                </div>
            </div>
        </div>

        <van-grid :column-num="2">
            <van-grid-item class="grid-item">
                <i slot="icon" class="toutiao toutiao-shoucang"></i>
                <span slot="text" class="text">收藏</span>
            </van-grid-item>
            <van-grid-item class="grid-item">
                <i slot="icon" class="toutiao toutiao-lishi"></i>
                <span slot="text" class="text">历史</span>
            </van-grid-item>
        </van-grid>

        <van-cell title="消息通知" is-link/>
        <van-cell title="小智同学" class="mb-9" is-link/>
        <van-cell v-if="user" title="退出登录" class="logout-cell" clickable @click="onLogout"/>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { getUserInfo } from '@/api/user.js'

export default {
    name: 'My',
    data () {
        return {
            userInfo: {}
        }
    },
    computed: {
        ...mapState(['user'])
    },
    methods: {
        onLogout () {
            this.$dialog.confirm({
                title: '确认退出?'
            })
            .then(() => {
                this.$store.commit('setUser', null)
            })
            .catch(() => {
                // on cancel
            })
        },
        async loadUserInfo () {
            try {
                const { data } = await getUserInfo()
                this.userInfo = data.data
            } catch (err) {
                this.$toast('获取用户数据失败', err)
            }
        }
    },
    created () {
        if (this.user) {
            this.loadUserInfo()
        }
    }
}
</script>

<style scoped>
.header {
    height: 361px;
    /* css中使用 @ 前必须加上 ~ */
    background: url('~@/assets/banner.png');
    background-size: cover;
}

.not-login{
    display: flex;
    justify-content: center;
    align-items: center;
}
.not-login .login-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.not-login .mobile-img {
    width: 132px;
    height: 132px;
    margin-bottom: 15px;
}
.not-login .text {
    font-size: 28px;
    color: #fff;
}

.user-info .base-info {
    height: 231px;
    padding: 76px 32px 23px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.left {
    display: flex;
    align-items: center;
}
.avatar {
    width: 132px;
    height: 132px;
    border: 4px solid #fff;
    margin-right: 23px;
}
.name {
    font-size: 30px;
    color: #fff;
}
.user-info .data-stats {
    height: 130px;
    display: flex;
}
.user-info .data-stats .data-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.data-item .count {
    font-size: 36px;
}
.data-item .text {
    font-size: 23px;
}

.grid-item {
    height: 141px;
    margin-bottom: 8px;
}
.grid-item .toutiao {
    font-size: 45px;
}
.toutiao-shoucang {
    color: #eb5253;
}
.toutiao-lishi {
    color: #ff9d1d;
}
.grid-item .text {
    font-size: 28px;
}

.logout-cell {
    margin-top: 8px;
    color: red;
    text-align: center;
}
</style>
